<template>
  <div class="datam">
    <PageTitle :title="'Data Management'">
      <template v-slot:operate>
        <n-button @click="$router.push('/fsconfig')">+ New</n-button>
      </template>
    </PageTitle>
<!--    <div class="datam-title" v-if="!d">
      <h1>🍊 We use JuiceFS to store your data</h1>
      <h2>It is POSIX and S3 compatible which means it can be mounted anywhere</h2>
    </div>-->
    <div style="text-align: center" v-if="!d">
      <n-spin size="large"/>
    </div>
    <n-carousel
        effect="card"
        prev-slide-style="transform: translateX(-120%) translateZ(-800px);"
        next-slide-style="transform: translateX(120%) translateZ(-800px);"
        style="height: 80vh;margin-top: 20px"
        :show-dots="true"
    >
      <n-carousel-item :style="{ width: '500px' }"  v-for="item in d" :key="item.id">
        <Card :data="item" class="card"></Card>
      </n-carousel-item>
    </n-carousel>
  </div>
</template>

<script setup>
import PageTitle from '@/components/PageTitle'
import Card from '@/components/dataM/Card'
import { NButton, NCarousel, NCarouselItem, NSpin }from 'naive-ui'
import {onMounted, ref} from "vue";
import fiatBE from "@/api/fiatBE";

let d = ref(null)

onMounted(() => {
  fiatBE.get('/juicefs/fetch').then(res => {
    d.value = res.data
  })
})


</script>

<style scoped>
.datam {
  padding: 0 var(--lrWhite);
}
.datam-title {
  text-align: center;
  margin-top: 20vh;
}
.datam h1{
  font-size: 50px;
}
.datam h2{
  font-size: 30px;
  letter-spacing: 1px;
  padding: 10px 0;
}
.card {
  margin: 0 auto;
}
</style>
